﻿@page "/diagram/routing"

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

@inherits SampleBaseComponent;

<SampleDescription>
   <p> This sample visualizes the connectors that are automatically re-routed or move away if any shape is found on the connector's paths.</p> 
   <p style="font-weight: bold;">A new blazor diagram component which provides better performance than the existing diagram control in Blazor WebAssembly App. It is available in preview mode. Check the samples <a target='_blank' href='diagramcomponent/flowchart'>here</a>.</p>
</SampleDescription>
<ActionDescription>
   <p>This example shows how the connectors are automatically re-routed on dragging a shape near it. This can be achieved by the constraints property of the diagram and connector.</p><br>
</ActionDescription>

<div id="diagram-space" class="sb-mobile-diagram">
    <SfDiagram Height="580px" Constraints="@Constraints" Nodes="@NodeCollection" Connectors="@ConnectorCollection">
        <DiagramSnapSettings Constraints="@SnapConstraint"></DiagramSnapSettings>
        <DiagramPageSettings>
            <DiagramFitOptions CanFit="true" Mode="FitModes.Page"></DiagramFitOptions>
        </DiagramPageSettings>
    </SfDiagram>
</div>

@code{

    SnapConstraints SnapConstraint = SnapConstraints.None;
    public DiagramConstraints Constraints { get; set; }

    public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();

    public ObservableCollection<DiagramConnector> ConnectorCollection = new ObservableCollection<DiagramConnector>();

    protected override void OnInitialized()
    {
        Constraints = DiagramConstraints.Default | DiagramConstraints.LineRouting | DiagramConstraints.Bridging;
        DiagramNode node1 = CreateNode("start", 115, 110, FlowShapes.Terminator, "Start", "#D5535D");
        DiagramPort port1 = CreatePort(node1, "port1", new NodePortOffset() { X = 0.5, Y = 0 });
        DiagramNode node2 = CreateNode("process", 115, 255, FlowShapes.Process, "Process", "#65B091");
        DiagramNode node3 = CreateNode("document", 115, 400, FlowShapes.Document, "Document", "#5BA5F0");
        DiagramPort port2 = CreatePort(node3, "port1", new NodePortOffset() { X = 0, Y = 0.5 });
        DiagramNode node4 = CreateNode("decision", 390, 110, FlowShapes.Decision, "Decision", "#9A8AF7");
        DiagramNode node5 = CreateNode("document2", 390, 255, FlowShapes.Document, "Document", "#5BA5F0");
        DiagramNode node6 = CreateNode("end", 390, 400, FlowShapes.Terminator, "End", "#D5535D");
        DiagramNode node7 = CreateNode("process2", 640, 110, FlowShapes.Process, "Process", "#65B091");
        DiagramNode node8 = CreateNode("card", 640, 255, FlowShapes.Card, "Card", "#76C3F0");
        DiagramPort port3 = CreatePort(node8, "port1", new NodePortOffset() { X = 1, Y = 0.5 });
        DiagramPort port4 = CreatePort(node8, "port2", new NodePortOffset() { X = 0.5, Y = 1 });

        CreateConnector("Connector1", "start", "process");
        CreateConnector("Connector2", "process", "document");
        CreateConnector("Connector3", "document", "end");
        CreateConnector("Connector4", "start", "decision");
        CreateConnector("Connector5", "decision", "process2");
        CreateConnector("Connector6", "process2", "card");
        CreateConnector("Connector7", "process", "document2");
        CreateConnector("Connector8", "document2", "card");
        CreateConnector("Connector9", "start", "card", "port1", "port1");
        CreateConnector("Connector10", "card", "document", "port2", "port1");
    }

    public DiagramNode CreateNode(string id, double offx, double offy, FlowShapes shape, string content, string nodefill)
    {
        DiagramNode node = new DiagramNode()
        {
            Id = id,
            OffsetX = offx,
            OffsetY = offy,
            Height = 50,
            Width = 120,
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Flow, FlowShape = shape },
            Style = new NodeShapeStyle() { Fill = nodefill, StrokeColor = "transparent" }
        };
        if (node.Id == "decision")
        {
            node.Height = 70;
        }
        DiagramNodeAnnotation annotation = new DiagramNodeAnnotation()
        {
            Content = content,
            Style = new AnnotationStyle() { Color = "White" }
        };
        node.Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
            annotation
        };
        NodeCollection.Add(node);
        return node;
    }

    public DiagramPort CreatePort(DiagramNode node, string pid, NodePortOffset offset)
    {
        DiagramPort port = new DiagramPort()
        {
            Id = pid,
            Offset = offset,
            Visibility = PortVisibility.Hidden
        };
        if (node.Ports == null)
        {
            node.Ports = new ObservableCollection<DiagramPort>();
        }
        (node.Ports as ObservableCollection<DiagramPort>).Add(port);
        return port;
    }

    public void CreateConnector(string id, string sourceid, string targetid, string sourceportid = null, string targetportid = null)
    {
        DiagramConnector connector = new DiagramConnector()
        {
            Id = id,
            SourceID = sourceid,
            TargetID = targetid,
            SourcePortID = sourceportid,
            TargetPortID = targetportid,
            Type = Syncfusion.Blazor.Diagrams.Segments.Orthogonal,
            Style = new ConnectorShapeStyle() { StrokeColor = "#707070", StrokeWidth = 1.25 },
            TargetDecorator = new ConnectorTargetDecorator() { Style = new DecoratorShapeStyle() { Fill = "#707070", StrokeColor = "#707070" } }
        };
        ConnectorCollection.Add(connector);
    }
}